<template>
    <el-dialog v-model="dialogShow" title="查看" :width="dialogWidth" center @close="closeHandle">
        <div class="avatar"><img :src="state.form.avatar" alt="" /></div>

        <el-descriptions border title="用户信息" direction="vertical" :column="3">
            <el-descriptions-item label="用户名">{{ state.form.username }}</el-descriptions-item>
            <el-descriptions-item label="手机">{{ state.form.phone }}</el-descriptions-item>
            <el-descriptions-item label="邮箱">{{ state.form.email }}</el-descriptions-item>
            <el-descriptions-item label="性别">
                <el-tag size="small" v-if="state.form.sex == 0">未知</el-tag>
                <el-tag size="small" v-if="state.form.sex == 1">男</el-tag>
                <el-tag size="small" v-if="state.form.sex == 2">女</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="状态">
                <el-tag size="small" v-if="state.form.active">激活</el-tag>
                <el-tag size="small" v-else>禁用</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="QQ">{{ state.form.qq }}</el-descriptions-item>
            <el-descriptions-item label="微信">{{ state.form.wechat }}</el-descriptions-item>
        </el-descriptions>
    </el-dialog>
</template>
<script lang="ts" setup>
import { reactive, ref, watch } from 'vue'
import { dialogAutoWidth } from '@/utils/dialog'

const props = defineProps({
    dialogShow: {
        require: true,
        default: false,
        type: Boolean,
    },
    data: {
        require: true,
        default: () => { },
        type: Object,
    }
})

// 自动宽度
let dialogWidth = ref("30%")
dialogWidth.value = dialogAutoWidth;

let state = reactive<any>({
    form: {
        id: "",
        nickname: "",
        phone: "",
        email: "",
        sex: 0,
        active: true,
        username: "",
        password: "",
        qq: "",
        wechat: "",
        avatar: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
    },
})

watch(() => props.data, () => {
    state.form = props.data;
}, { deep: true, immediate: true })

const emits = defineEmits(['close'])
const closeHandle = () => {
    emits('close', false);
}

</script>

<style lang="less" scoped>
.avatar {
    display: flex;
    justify-content: center;
    
    & img{
        border-radius: 180px;
        width: 100px;
        height: 100px;
    }
}
</style>